<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item">
          <span>用户组</span>
          <div class="right" v-loading="boo.tabloading">
            <span v-for="(item, index) in grouplist" :key="index" :class="params_list.type == item.adminGroupId ? 'active' : ''" @click="selected(item)">{{item.adminGroupName}}</span>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          用户列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">新增用户</el-button>
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="adminUserNickname" label="用户昵称" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="adminUserRealname" label="用户姓名" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="adminUserLoginname" label="登录账号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="adminGroupName" label="所属用户组" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="adminUserStatus" label="状态" align="center">
          </el-table-column>
          <el-table-column label="操作" width="160" align="center">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="deteleRow(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
           <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增用户 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="60%">
      <div slot="title" class="header-title">
        <span class="title-name">{{currentRow.adminUserId ? '编辑用户' : '新增用户'}}</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <div class="title">基本信息</div>
              <el-form-item label="请输入用户名：" prop="adminUserLoginname">
                <el-input v-model="currentRow.adminUserLoginname" :disabled="currentRow.adminUserId ? true : false" placeholder="请输入用户名"></el-input>
                <span class="gray">登录账号是使用系统内显示的操作人</span>
              </el-form-item>
              <el-form-item label="请输入姓名：" prop="adminUserRealname">
                <el-input v-model="currentRow.adminUserRealname" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="请输入昵称：" prop="adminUserNickname">
                <el-input v-model="currentRow.adminUserNickname" placeholder="请输入昵称"></el-input>
              </el-form-item>
              <el-form-item label="请输入邮箱：" prop="adminUserEmail">
                <el-input v-model="currentRow.adminUserEmail" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="请输入密码：" prop="password">
                <el-input v-model="currentRow.password" placeholder="请输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item label="选择用户组：" prop="adminGroupId">
                <el-select class="tel-value" v-model="currentRow.adminGroupId" placeholder="请选择">
                  <el-option v-for="(item, index) in grouplist" :key="index" :label="item.adminGroupName" :value="item.adminGroupId"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">提交</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
      const validatepassword = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入密码'));
        } else {
          if (this.$reg.isPwd(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确密码'));
          }
        }
      }
      const validateEmail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入邮箱'));
        } else {
          if (this.$reg.isEmail(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确邮箱'));
          }
        }
      }
      
			return {
        https: {
          list: this.$api.permit.user,
          status: this.$api.permit.group.page
        },
        boo: {
          tabloading: false,
          loading: false,
          showDialog: false,
          saveing: false,
        },
        other: {
          allRow: 1,
        },
        list: '',
        currentRow: {},
        params_list: {
          page: 1,
          size: 10,
          type: '',
        },
        grouplist: '',
        rules: {
          adminUserRealname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          adminUserLoginname: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          adminGroupId: [{ required: true, message: '请选择用户组', trigger: 'change' }],
          adminUserNickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
          adminUserEmail: [{ required: true, validator: validateEmail, trigger: 'blur' }],
          password: [{ required: true, validator: validatepassword, trigger: 'blur' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      _self.getGroup()
    },
		methods: {
      getGroup(){
        let _self = this
        _self.boo.tabloading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.grouplist = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.tabloading = false
        }
        _self.$axios.get(_self.https.status, {}, success) 
      },
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          orderBy: '',
          adminGroupId: _self.params_list.type,
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.list = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      selected(item){
        let _self = this
        _self.params_list.type = item.adminGroupId
        _self.getList()
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      addRow(){
        let _self = this
        _self.currentRow = {}
        _self.boo.showDialog = true
      },
      viewRow(item){
        let _self = this
        _self.currentRow = JSON.parse(JSON.stringify(item))
        _self.boo.showDialog = true
      },
      deteleRow(item){
        let _self = this
        let params = {
          id: item.adminUserId
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.getList()
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.delete(`${_self.https.list.detail}${params.id}`, params, success) 
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            _self.boo.saveing = true
            let params = {
              adminUserLoginname: _self.currentRow.adminUserLoginname,
              adminUserRealname: _self.currentRow.adminUserRealname,
              adminUserNickname: _self.currentRow.adminUserNickname,
              adminUserEmail: _self.currentRow.adminUserEmail,
              password: _self.currentRow.password,
              adminGroupId: _self.currentRow.adminGroupId,
            }    
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.getList()
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.saveing = false
              _self.boo.showDialog = false
            }
            if(_self.currentRow.adminUserId){
              _self.$axios.put(`${_self.https.list.detail}${_self.currentRow.adminUserId}`, params, success) 
            }else {
              _self.$axios.post(_self.https.list.add, params, success) 
            }
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-form /deep/ .el-input--small, .jx-form /deep/ .el-textarea
    width: 55%
  .jx-form /deep/ .el-select--small
    width: 100%
  .gray
    font-size: 12px
    margin-left: 5px
</style>
